<!DOCTYPE html>
<html>

<head>
    <title> 纯CSS代码实现图片轮播 </title>
    <meta charset="utf-8" />
    <style type="text/css">
        #frame {
            /*----------图片轮播相框容器----------*/
            position: absolute;
            /*--绝对定位，方便子元素的定位*/
            width: 500px;
            height: 300px;
            overflow: hidden;
            /*--相框作用，只显示一个图片---*/
            border-radius: 5px;
        }

        #dis {
            /*--绝对定位方便li图片简介的自动分布定位---*/
            position: absolute;
            left: -50px;
            top: -10px;
            opacity: 0.5;
        }

        #dis li {
            display: inline-block;
            width: 200px;
            height: 20px;
            margin: 0 150px;
            float: left;
            text-align: center;
            color: #fff;
            border-radius: 10px;
            background: #000;
        }

        #photos img {
            float: left;
            width: 500px;
            height: 300px;
        }

        #photos {
            /*---设置总的图片宽度--通过位移来达到轮播效果----*/
            position: absolute;
            z-index: 9px;
            width: calc(500px * 5);
            /*---修改图片数量的话需要修改下面的动画参数*/
        }

        .play {
            animation: ma 20s ease-out infinite alternate;
            /**/
        }

        @keyframes ma {
            /*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
            0%,
            20% {
                margin-left: 0px;
            }
            25%,
            40% {
                margin-left: -500px;
            }
            45%,
            60% {
                margin-left: -1000px;
            }
            65%,
            80% {
                margin-left: -1500px;
            }
            85%,
            100% {
                margin-left: -2000px;
            }
        }

        .num {
            position: absolute;
            z-index: 10;
            display: inline-block;
            right: 10px;
            bottom: 8px;
            border-radius: 100%;
            background: #000;
            width: 25px;
            height: 25px;
            line-height: 25px;
            cursor: pointer;
            color: #fff;
            text-align: center;
            opacity: 0.8;
        }

        .num:hover {
            background: #fff;
            color: #333;
        }

        .num:hover,
        #photos:hover {
            animation-play-state: paused;
        }

        .num:nth-child(2) {
            margin-right: 30px
        }

        .num:nth-child(3) {
            margin-right: 60px
        }

        .num:nth-child(4) {
            margin-right: 90px
        }

        .num:nth-child(5) {
            margin-right: 120px
        }

        #a1:hover~#photos {
            animation: ma1 .5s ease-out forwards;
        }

        #a2:hover~#photos {
            animation: ma2 .5s ease-out forwards;
        }

        #a3:hover~#photos {
            animation: ma3 .5s ease-out forwards;
        }

        #a4:hover~#photos {
            animation: ma4 .5s ease-out forwards;
        }

        #a5:hover~#photos {
            animation: ma5 .5s ease-out forwards;
        }

        @keyframes ma1 {
            0% {
                margin-left: -2000px;
            }
            100% {
                margin-left: -0px;
            }
        }

        @keyframes ma2 {
            0% {
                margin-left: -2000px;
            }
            100% {
                margin-left: -500px;
            }
        }

        @keyframes ma3 {
            100% {
                margin-left: -1000px;
            }
        }

        @keyframes ma4 {
            100% {
                margin-left: -1500px;
            }
        }

        @keyframes ma5 {
            100% {
                margin-left: -2000px;
            }
        }
    </style>
</head>

<body>
    <div id="frame">
        <a id="a1" class="num">1</a>
        <a id="a2" class="num">2</a>
        <a id="a3" class="num">3</a>
        <a id="a4" class="num">4</a>
        <a id="a5" class="num">5</a>
        <div id="photos" class="play">
            <img src="http://eduppp.cn/images/0/1.jpg">
            <img src="http://eduppp.cn/images/0/3.jpg">
            <img src="http://eduppp.cn/images/0/4.jpg">
            <img src="http://eduppp.cn/images/0/5.jpg">
            <img src="http://eduppp.cn/images/0/2.jpg">
            <ul id="dis">
                <li>中国标志性建筑：天安门</li>
                <li>中国标志性建筑：东方明珠</li>
                <li>中国标志性建筑：布达拉宫</li>
                <li>中国标志性建筑：长城</li>
                <li>中国标志性建筑：天坛</li>
            </ul>
        </div>
    </div>
</body>

</html>